<template>
	<view class="main">
		<scroll-view scroll-y="true" >
			<view class="content">
					<u-swiper :list="swiperList" mode="number" circular class="preview" indicator-pos="bottomRight" :autoplay="aotoPlay"></u-swiper>
					<view class="price">
						<text>￥</text>
						<text>{{dataList.price}}</text>
					</view>
					<view class="name">
						<text>{{dataList.name}}</text>
						<text>{{dataList.desc}}</text>
					</view>
					<view class="action">
						<view class="select">
							<text class="title">选择</text>
							<text class="desc">请选择商品规格</text>
								<u-icon name="arrow-right" class="to" color="#898b94"></u-icon>
						</view>
						<view class="address">
							<text class="title">送至</text>
							<text class="desc">请选择收获地址</text>
							<u-icon name="arrow-right" class="to" color="#898b94"></u-icon>
						</view>
						<view class="service">
							<text class="title">服务</text>
							<text class="desc">无忧退 快速退款 免费包邮</text>
							<u-icon name="arrow-right" class="to" color="#898b94"></u-icon>
						</view>
					</view>
					<view class="detail-pannel">
						<view class="title">
							<text>详细</text>
						</view>
						<view class="content" v-if="flag">
							<view class="item" v-for="item in dataList.details.properties">
								<text class="label">{{item.name}}</text>
								<text class="value">{{item.value}}</text>
							</view>
							<image mode="widthFix" :src="item" v-for="item in dataList.details.pictures"></image>
						</view>
					</view>
					<view class="similar">
						<view class="title">
							<text>同类推荐</text>
						</view>
						<view class="content" v-if="flag">
							<view class="goods-item" v-for="item in dataList.similarProducts">
								<image :src="item.picture" mode=""></image>
								<view class="name"><text>{{item.name}}</text></view>
								<view class="price"><text class="price">￥{{item.price}}</text></view>		
							</view>
						</view>
					</view>		
			</view>
		</scroll-view>
		<view class="toolPannel">
			<view class="icon"><u-icon name="heart" size="35" label="收藏" label-pos="bottom" label-size="14"></u-icon></view>
			<view class="icon"><u-icon name="server-fill" size="35" label="客服" label-pos="bottom" label-size="14"></u-icon></view>
			<view class="icon"><u-icon name="shopping-cart" size="35" label="购物车" label-pos="bottom" label-size="14"></u-icon></view>
			<button class="cart">加入购物车</button>
			<button class="buy">立即购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				id: '',
				dataList: {},
				flag: false,
				aotoPlay: false
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getData()
		},
		methods:{
			async getData(){
				const res = await this.$http({
					url: '/goods',
					data: {
						id: this.id
					}
				})
				console.log(res.data.result)
				this.swiperList = res.data.result.mainPictures
				this.dataList = res.data.result
				this.flag = true
			}
		}
	}
</script>

<style lang="scss">
page{
	height: 100%;
	.main{
		height: 100%;
		display: flex;
		flex-direction: column;
		scroll-view{
			flex: 1;
			background-color: #f4f4f4;
			overflow: hidden;
			.content{
				display: flex;
				flex-direction: column;
				height: fit-content;
				.preview{
					height: 750rpx;
					/deep/uni-swiper{
						height: 750rpx !important;
					}
				}
				.price{
					background-color: #35c8a9;
					padding: 20rpx;
					height: 130rpx;
					padding: 40rpx 30rpx 0;
					box-sizing: border-box;
					// display: flex;
					// flex-direction: row;
					// align-items: center;
					color: #fff;
					text:nth-child(2){
						font-size: 56rpx;
					}
				}
				.name{
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					height: fit-content;
					text:nth-child(1){
						line-height: 1.4;
						font-size: 32rpx;
						color: #333;
					}
					text:nth-child(2){
						line-height: 1;
						font-size: 24rpx;
						color: #cf4444;
						margin-top: 20rpx;
					}
				}
				.action{
					.select{
						padding: 20rpx;
						height: 90rpx;
						box-sizing: border-box;
						border-top: 1rpx solid #eaeaea;
						font-size: 26rpx;
						color: #333;
						position: relative;
						.title{
							color: #898b94;
						}
						.desc{
							margin-left: 30rpx;
						}
						.to{
							position: absolute;
							right: 20rpx;
							bottom: 30rpx;
						}
					}
					.address{
						padding: 20rpx;
						height: 90rpx;
						box-sizing: border-box;
						border-top: 1rpx solid #eaeaea;
						font-size: 26rpx;
						color: #333;
						position: relative;
						.title{
							color: #898b94;
						}
						.desc{
							margin-left: 30rpx;
						}
						.to{
							position: absolute;
							right: 20rpx;
							bottom: 30rpx;
						}
					}
					.service{
						padding: 20rpx;
						height: 90rpx;
						box-sizing: border-box;
						border-top: 1rpx solid #eaeaea;
						font-size: 26rpx;
						color: #333;
						position: relative;
						.title{
							color: #898b94;
						}
						.desc{
							margin-left: 30rpx;
						}
						.to{
							position: absolute;
							right: 20rpx;
							bottom: 30rpx
						}
					}
				}
				.detail-pannel{
					margin-top: 20rpx;
					padding: 20rpx;
					.title{
						position: relative;
						padding: 15rpx;
						text{
							font-size: 32rpx;
							font-weight: bold;
							&::before{
								content: '';
								position: absolute;
								height: 50%;
								width: 6rpx;
								background-color: #35c8a9;
								left: 0;
								top: 25%;
							}
						}
					}
					.content{
						padding-top: 10rpx;
						.item{
							padding: 10rpx 0;
							border-bottom: 3rpx dashed #eaeaea;
							height: fit-content;
							display: flex;
							.label{
								line-height: 2;
								width: 200rpx;
							}
							.value{
								line-height: 2;
							}
						}
					}
				}
				image{
					width: 100%;
				}
				.similar{
					background-color: #f4f4f4;
					margin-top: 30rpx;
					.title{
						position: relative;
						padding: 15rpx;
						text{
							font-size: 32rpx;
							font-weight: bold;
							&::before{
								content: '';
								position: absolute;
								height: 50%;
								width: 6rpx;
								background-color: #35c8a9;
								left: 0;
								top: 25%;
							}
						}
					}
					.content{
						background-color: #f4f4f4;
						padding: 20rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
						.goods-item{
							padding: 20rpx;
							background-color: #fff;
							display: flex;
							flex-direction: column;
							width: 340rpx;
							height: fit-content;
							margin-bottom: 20rpx;
							image{
								width: 300rpx;
								height: 260rpx;
							}
							.name{
								font-size: 26rpx;
								height: 100rpx;
								color: #262626;
								padding: 0;
							}
							.price{
								background-color: #fff;
								line-height: 1;
								font-size: 20rpx;
								color: #cf4444;
								height: fit-content;
								padding: 0;
							}
						}
					}
				}
			}
		}
		.toolPannel{
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx;
			.icon{
				padding: 0 20rpx;
			}
			.cart{
				font-size: 26rpx;
				width: 220rpx;
				border-radius: 50rpx;
				background-color: #ff9900;
				color: white;
			}
			.buy{
				font-size: 26rpx;
				width: 200rpx;
				border-radius: 50rpx;
				background-color: #909399;
				color: white;
				margin-left: 20rpx;
			}
		}
	}
}
</style>
